<template>
	<view>
		<view class="integral-box theme-color-bg">
			<view class="integral-sum">
				<view class="" style="font-size: 64rpx;">{{ userInfo.integral }}</view>
				<view class="">积分</view>
			</view>
		</view>
		<view class="w-max" style="background-color: #FFFFFF;margin-top: 20rpx;">
			<view class="w-max _h-10"></view>
			<view class="w-max" style="margin-bottom: 20rpx;">
				<view class="wire theme-color-bg"></view>
				<text style="font-size: 30rpx;margin-left: 20rpx;">积分明细</text>
			</view>
			<view class="" style="margin-left: 58rpx;margin-right: 58rpx;">
				<block v-for="(item,index) in internalList" :key="index">
					<view class="int-det">
						<view class="" style="float: left;">
							<view>{{ item.title }}</view>
							<view class="mar-t-8" style="color: #999999; font-size: 20rpx;">{{ item.add_time }}</view>
						</view>
						<view class="quantity theme-color">{{ item.pm == 0 ? '-' : '+'}}{{ item.number }}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	import { getUserInfo } from '@/api/user.js';
	import { toLogin, checkLogin } from '@/libs/login.js';
	import { getIntegralList } from '@/api/car.js';
	export default {
		data() {
			return {
				recHeight: '',//状态栏高度
				titleBarHeight:'', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '',//顶部距离
				headerHeight:'',//头部总高度
				
				integralForm:{
					page:1,
					limit:15,
				},
				internalList:[],
				userInfo:{},// 用户信息
			}
		},
		computed: mapGetters(['isLogin']),
		onLoad() {
			uni.showLoading({ title:'加载中...', mask:true })
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height;//小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top;//顶部距离
			this.getPhoneInfo();
			this.getList();
		},
		onShow() {
			let that = this;
			if(!this.isLogin){
				toLogin()
			}
			this.getUserInfo();
		},
		onReachBottom() {
			uni.showLoading({
				title:'正在加载...'
			});
			this.getList();
		},
		methods: {
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				//小程序 配置
				uni.getSystemInfo({
					success(res){
						that.recHeight = res.statusBarHeight;//获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2); 
					}
				})
				const query = uni.createSelectorQuery().in(that);
				    query.select('.shops_search').boundingClientRect(data => {
				}).exec();
			},
			// 积分列表
			getList(){
				let that = this;
				let list = [];
				getIntegralList(this.integralForm).then((res)=>{
					list = res.data.list;
					if(list.length > 0){
						that.internalList = that.internalList.concat(list);
						that.integralForm.page ++;
					}
					uni.hideLoading();
				}).catch((err)=>{
					uni.hideLoading();
					uni.showToast({
						title:'获取积分列表失败',
						icon:'none'
					})
				})
			},
			// 获取用户信息
			getUserInfo() {
				let that = this;
				getUserInfo().then((res)=>{
					that.userInfo = res.data;
				}).catch((err)=>{
					uni.showToast({
						title:'用户信息获取失败',
						icon:'none'
					})
				})
			},
		}
	}
</script>

<style>
	.integral-box{
		width: 100%;
		height: 260rpx;
		/* color: #BE9D78; */
		background-color: #343134;
		position:relative;
	}
	.integral-sum{
		position:absolute;
		text-align: center;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	.wire{
		width: 8rpx;
		/* background-color: #BE9D78; */
		height: 40rpx;
		margin-left: 30rpx;
		border-radius: 5rpx;
		float: left;
	}
	.quantity{
		/* color: #BE9D78; */
		float: right;
		margin-right: 20rpx;
		margin-top: 10rpx;
		font-size: 36rpx;
	}
	.mar-t-8{ margin-top: 8rpx; }
	.int-det{
		border-bottom: 1rpx solid #e8eaec;
		height: 90rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
</style>
